<template>
	<div>
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>交易管理</el-breadcrumb-item>
			<el-breadcrumb-item>购买交易管理</el-breadcrumb-item>
		</el-breadcrumb>
		<el-card>
			<el-row :gutter="20">
				<el-col :span="3">
					<el-input v-model="seachlist.shopName" placeholder="搜索关键字"></el-input>
				</el-col>
				<el-col :span="3">
					<!-- 审核状态：1提交审核，2审核通过，3拒绝，4撤销 -->
					<el-select v-model="seachlist.auditStatus" placeholder="审批状态">
						<el-option value="" label="选择审批状态"></el-option>
					    <el-option key="2" label="已通过" value="2"></el-option>
					    <el-option key="1" label="待审批" value="1"></el-option>
					    <el-option key="4" label="已撤销" value="4"></el-option>
					    <el-option key="3" label="已驳回" value="3"></el-option>
					  </el-select>
				</el-col>
				
				<el-date-picker
				  v-model="submitTime"
				  type="daterange"
				start-placeholder="提交开始日期"
				end-placeholder="提交结束日期"
				  value-format="yyyy-MM-dd"
				  @change="changesubmitTime">
				</el-date-picker>
				<el-date-picker
				  v-model="auditTime"
				  type="daterange"
				start-placeholder="审批开始日期"
				end-placeholder="审批结束日期"
				  value-format="yyyy-MM-dd"
				  @change="changeauditTime">
				</el-date-picker>
				<el-col :span="3">
					<el-input v-model="seachlist.businessAffairsName" placeholder="提交人"></el-input>
				</el-col>
				<el-button type="primary" @click="search">查询</el-button>
				<el-button @click="clear">清空</el-button>
			</el-row>
			
			
			<el-table :data="listData" border stripe>
				<el-table-column label="商户编号" prop="shopId"></el-table-column>
				<el-table-column label="商户名称" prop="shopName"></el-table-column>
				<el-table-column label="隶属品牌" prop="brandName"></el-table-column>
				<el-table-column label="项目分类" prop="menuName"></el-table-column>
				<el-table-column label="提交人员" prop="submitName"></el-table-column>
				<el-table-column label="提交时间" prop="submitTime"></el-table-column>
				<el-table-column label="审批状态">
					<template slot-scope="scope">
						<span v-if="scope.row.auditStatus==1">待审批</span>
						<span v-if="scope.row.auditStatus==2">已通过</span>
						<span v-if="scope.row.auditStatus==3">已驳回</span>
						<span v-if="scope.row.auditStatus==4">已撤销</span>
					</template>
				</el-table-column>
				<el-table-column label="审批人" prop="auditName"></el-table-column>
				<el-table-column label="审批时间" prop="auditTime"></el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button @click="showLoanDialog(scope.row.shopId)" type="primary" size="mini">详情</el-button>
					</template>
				</el-table-column>
			</el-table>
			
			<!-- 分页 -->
			<el-pagination
			  @size-change="handleSizeChange"
			  @current-change="handleCurrentChange"
			  :current-page="pageCount"
			  :page-size="pageSize"
			  layout="total, sizes, prev, pager, next, jumper"
			  :total="total">
			</el-pagination>
			
			
		</el-card>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				listData:[],
				pageSize:20,
				pageCount:1,
				total:0,
				submitTime:'',
				auditTime:'',
				seachlist:{'shopName':'','auditStatus':'','submitStartTime':'','submitEndTime':'','auditStartTime':'','auditEndTime':'','businessAffairsName':''},
				recordJson:[],
				LoanDialogVisible:false
			}
		},
		created() {
			this.getList()
		},
		methods:{
			clear(){
				this.seachlist={'shopName':'','auditStatus':'','submitStartTime':'','submitEndTime':'','auditStartTime':'','auditEndTime':'','businessAffairsName':''}
			},
			async getList(){
				console.log(this.seachlist)
				const loading = this.$loading({
				  lock: true,
				  text: 'Loading',
				  spinner: 'el-icon-loading',
				  background: 'rgba(0, 0, 0, 0.7)'
				});
				 const {data:res} = await this.$http.post('/shopStagesManage/list',{auditEndTime:this.seachlist.auditEndTime,auditStartTime:this.seachlist.auditStartTime,submitStartTime:this.seachlist.submitStartTime,submitEndTime:this.seachlist.submitEndTime,shopName:this.seachlist.shopName,auditStatus:this.seachlist.auditStatus,businessAffairsName:this.seachlist.businessAffairsName,pageSize:this.pageSize,pageCount:this.pageCount})
				setTimeout(() => {
				  loading.close();
				}, 500);
				 this.listData = res.data.records
				 this.total = res.data.total
				 
			},
			search(){
				
				this.getList()
			},
			handleSizeChange(val) {
				// console.log(`每页 ${val} 条`);
				this.pageSize = val
				this.getList()
			},
			handleCurrentChange(val) {
				// console.log(`当前页: ${val}`);
				this.pageCount = val
				this.getList()
			},
			changesubmitTime(e){
				if(e == null){
					this.seachlist.submitStartTime = ''
					this.seachlist.submitEndTime = ''
				}else{
					this.seachlist.submitStartTime = e[0]
					this.seachlist.submitEndTime = e[1]
				}
				
			},
			changeauditTime(e){
				if(e == null){
					this.seachlist.auditStartTime = ''
					this.seachlist.auditEndTime = ''
				}else{
					this.seachlist.auditStartTime = e[0]
					this.seachlist.auditEndTime = e[1]
				}
				
			},
			async showLoanDialog(shopId){
				this.$router.push({path:'/approvalMerchants', query:{'shopId': shopId}})
			},
			toUser(phone){
				this.$router.push({path:'/user', query:{'phone': phone}})
			}
		}
	}
</script>

<style lang="less" scoped>
	.el-date-editor{
		margin-right: 10px;
	}
</style>
